<div id="content">
  <div class="row">
    <sa-big-breadcrumbs [items]="['客户与授信', '客户管理']" icon="pencil-square-o"
                        class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs>

    <sa-stats></sa-stats>
  </div>
  <!--
      The ID "widget-grid" will start to initialize all widgets below
      You do not need to use widgets if you dont want to. Simply remove
      the <section></section> and you can use wells or panels instead
      -->
  <!-- widget grid -->
  <sa-widgets-grid>
    <!-- row -->
    <div class="row">
      <!-- NEW WIDGET START -->
      <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <!-- Widget ID (each widget will need unique ID)-->
        <sa-widget class="well">
          <!-- widget options:
              usage: <sa-widget id="wid-id-0" [editbutton]="false">
              [colorbutton]="false"
              [editbutton]="false"
              [togglebutton]="false"
              [deletebutton]="false"
              [fullscreenbutton]="false"
              [custombutton]="false"
              [collapsed]="true"
              [sortable]="false"
          -->
          <header>
            <span class="widget-icon"> <i class="fa fa-comments"></i> </span>

            <h2>Widget Title </h2>
          </header>
          <!-- widget div-->
          <div>
            <!-- widget content -->
            <div class="widget-body no-padding">

              <sa-datatable
                [options]="{
                  ajax: 'assets/api/clients/users.json',
                  columns: [
                    {data: 'userId'},
                    {data: 'nickname'},
                    {data: 'name'},
                    {data: 'gender'},
                    {data: 'idNo'},
                    {data: 'phone'},
                    {data: 'address'},
                    {data: 'regDate'},
                    {data: 'status'}
                  ]
              }"
                filter="true" paginationLength="true"
                tableClass="display projects-table table table-striped table-bordered table-hover"
                width="100%">
                <thead>
                <tr>
                  <th class="hasinput" style="width:10%">
                    <input type="text" class="form-control" placeholder="用户ID">
                  </th>
                  <th class="hasinput" style="width:10%">
                    <input type="text" class="form-control" placeholder="用户昵称">
                  </th>
                  <th class="hasinput" style="width:10%">
                    <input type="text" class="form-control" placeholder="姓名">
                  </th>
                  <th class="hasinput" style="width:10%">
                    <input type="text" class="form-control" placeholder="性别">
                  </th>
                  <th class="hasinput" style="width:10%">
                    <input type="text" class="form-control" placeholder="身份证号码">
                  </th>
                  <th class="hasinput" style="width:10%">
                    <input type="text" class="form-control" placeholder="手机号">
                  </th>
                  <th class="hasinput" style="width:10%">
                    <input type="text" class="form-control" placeholder="住址">
                  </th>
                  <th class="hasinput icon-addon">
                    <input id="dateselect_filter" type="text" placeholder="注册日期"
                           class="form-control datepicker" data-dateformat="yy/mm/dd">
                    <label for="dateselect_filter" class="glyphicon glyphicon-calendar no-margin padding-top-15"
                           rel="tooltip" title="" data-original-title="注册日期"></label>
                  </th>
                  <th class="hasinput" style="width:10%">
                    <input type="text" class="form-control" placeholder="Status Filter">
                  </th>

                </tr>
                <tr>
                  <th data-class="expand">用户ID</th>
                  <th>用户昵称</th>
                  <th>姓名</th>
                  <th>性别</th>
                  <th>身份证号码</th>
                  <th>手机号</th>
                  <th>住址</th>
                  <th>注册日期</th>
                  <th>状态</th>
                </tr>
                </thead>

              </sa-datatable>
            </div>
            <!-- end widget content -->
          </div>
          <!-- end widget div -->
        </sa-widget>
        <!-- end widget -->
      </article>
      <!-- WIDGET END -->
    </div>
    <!-- end row -->
  </sa-widgets-grid>
  <!-- end widget grid -->
</div>
